<template>
  <div class="batch-details-box">
    <el-dialog title="任务详情"
               :visible="value"
               append-to-body
               :close-on-click-modal="false"
               width="900px"
               @update:visible="updateVisible($event)">
      <div class="desc">
        <el-descriptions :column="column">
          <el-descriptions-item v-for="(info, index) in taskInfo"
                                :key="index"
                                :label="info.label">
            {{ info.value }}
          </el-descriptions-item>
        </el-descriptions>
        <!-- 表格 -->
        <el-form :inline="true"
                 :model="formInline"
                 class="demo-form-inline">
          <el-form-item label="状态">
            <el-select v-model="formInline.status"
                       clearable
                       placeholder="请选择"
                       @input="handleInput">
              <el-option v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary"
                       @click="onSubmit">查询</el-button>
          </el-form-item> -->
        </el-form>
        <el-table v-loading="loading"
                  :data="tableData"
                  :row-style="{height: '50px'}"
                  :max-height="maxTableHeight"
                  border>
          <el-table-column type="index"
                           width="50"></el-table-column>
          <template v-for="(item, index) in tableCloumn">
            <el-table-column :key="index"
                             :prop="item.prop"
                             :label="item.label">
              <template slot-scope="scope">
                <div v-if="item.prop === 'businessId'">
                  <el-button v-if="isClickable(scope.row)"
                             type="text"
                             @click="handleClick(scope.row)">
                    {{ scope.row[item.prop] }}
                  </el-button>
                  <div v-else>
                    {{ scope.row[item.prop] }}
                  </div>
                </div>
                <div v-else>
                  {{ scope.row[item.prop] }}
                </div>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <el-pagination v-show="tableData.length > 0"
                       class="pagination-box"
                       :current-page="page"
                       :page-sizes="pageSizeOptions"
                       :page-size="size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { tenant } from '@service'
import _ from 'lodash'
// import { TableProvider } from "@tablra";

const cloumn = [
  {
    prop: 'businessId',
    label: '业务ID'
  },
  {
    prop: 'contractNo',
    label: '合同编号'
  },
  {
    prop: 'businessNo',
    label: '单据编号'
  },
  {
    prop: 'finishAt',
    label: '执行时间'
  },
  {
    prop: 'statusName',
    label: '状态'
  },
  {
    prop: 'failReason',
    label: '失败原因'
  },
]

const batchList = [
  {
    batchTypes: [1],
    batchNames: ["运单批量调度"],
    module: "承运方调度计划",
    route: "scheduleDetail",
    queryKey: "waybillId"
  },
  {
    batchTypes: [4, 5],
    batchNames: ["运单批量签收", "运单批量回单"],
    module: "运单管理",
    route: "carrierWayBillDetail",
    queryKey: "waybillId"
  },
  // {
  //   batchTypes: [3],
  //   batchNames: ["运单批量接收"],
  //   module: "待接收运单",
  //   route: "wayBillDetail",
  //   queryKey: "waybillId"
  // },
  // {
  //   batchTypes: [6],
  //   batchNames: ["合单批量接收"],
  //   module: "待接收合单",
  //   route: "oneBillDetails",
  //   queryKey: "combineId"
  // },
  {
    batchTypes: [8, 9, 10, 11, 12],
    // batchNames: ["运单批量签收", "运单批量绑定"],
    module: "订单管理",
    route: "orderDetails",
    queryKey: "orderId"
  }
]

const NOT_CLICKABLE_TYPES = [12, 14, 2, 3, 6, 7];

export default {
  name: 'BatchDetailsDialog',
  // components: { TableProvider },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      page: 1,
      size: 10,
      total: 0,
      tableData: [],
      column: 3,
      pageSizeOptions: [10, 20, 50, 100,],
      formInline: {
        status: ""
      },
      tableCloumn: cloumn,
      loading: false,
      maxTableHeight: '420px',
      link: 'orderDetails'
    }
  },
  computed: {
    taskId () {
      return this.data?.taskId
    },
    filterData () {
      return {
        ...this.formInline,
        page: this.page,
        size: this.size
      }
    },
    isClickable () {
      return row => row.status === -1
        && !NOT_CLICKABLE_TYPES.includes(this.data.type);
    },
    options () {
      return [
        {
          label: '成功',
          value: 1
        },
        {
          label: '待执行',
          value: 0
        },
        {
          label: '失败',
          value: -1
        }
      ]
    },
    taskInfo () {
      return [
        { label: '任务ID', value: this.data.taskId },
        { label: '操作类型', value: this.data.typeName },
        // { label: '操作人', value: this.data.userName },
        { label: '操作时间', value: this.data.createAt }
      ]
    },
    matchedItems () {
      return type => batchList.filter(({ batchTypes }) =>
        batchTypes.includes(type))?.[0]
    }
  },
  watch: {
    value () {
      if (this.value) {
        this.page = 1
        this.size = 10
        this.load()
      }
    }
  },
  created () {
  },
  methods: {
    handleClose () {
      this.$emit("input", false);
    },
    updateVisible ($event) {
      this.$emit('input', $event)
    },
    handleClick (row) {
      const { type } = this.data
      const { businessId } = row
      // const matchedItems = batchList.filter(({ batchTypes }) => batchTypes.includes(type))?.[0];
      const matchedItem = this.matchedItems(type)
      if (matchedItem) {
        const query = { [matchedItem?.queryKey]: businessId };
        this.$router.push({ name: matchedItem.route, query })
        this.$emit("input", false);
      }
    },
    async load () {
      this.loading = true
      const response = await tenant.getTask(this.taskId, this.filterData)
      if (response?.code === 0) {
        this.tableData = response?.data?.records
        this.total = response?.data?.total
        this.loading = false
      }
    },
    handleSizeChange (size) {
      this.size = size
      this.page = 1
      this.load()
    },
    handleCurrentChange (curren) {
      this.page = curren
      this.load()
    },
    handleInput: _.debounce(function () {
      this.page = 1
      this.load()
    })
  }
}
</script>

<style lang="scss" scoped>
.demo-form-inline {
  padding-top: 20px;
  // font-size: 14px;
}
.desc ::v-deep .el-descriptions-item__container {
  font-size: 14px;
}
.pagination-box {
  text-align: end;
  padding-top: 12px;
}
</style>